<template>
  <div id="view-login">
    <!-- <div class="loginBg">
      <img :src="bgImg" alt="" class="loginImg">
      <div class="loginMask"></div>
    </div> -->
    <div class="content flipper" :class="{ 'flipped': isRegister }">
      <div class="loginBox front">
        <div class="formTable">
          <div class="title font000">—————— 登录 ——————</div>
          <el-form :model="loginData" :rules="loginRules" ref="loginForm" label-width="auto" class="">
            <el-form-item prop="name">
              <!-- <el-input v-model="loginData.name" @input="change($event)"></el-input> -->
              <fcInput v-model="loginData.name" placeholder="用户名" @input="change($event)"></fcInput>
            </el-form-item>
            <el-form-item prop="password">
              <!-- <el-input v-model="loginData.password" @input="change($event)" type="password" show-password></el-input> -->
              <fcInput v-model="loginData.password" placeholder="密码" @input="change($event)" type="password" show-password></fcInput>
            </el-form-item>
          </el-form>
          <div class="button btn fontFFF" @click="login">登录</div>
          <div class="bottomBar f12 font2">
            <div class="btn" @click="forgetPw">忘记密码</div>
            <div>｜</div>
            <div class="btn" @click="toRegister">立即注册</div>
            <div>｜</div>
            <div class="btn" @click="toHome">返回首页</div>
          </div>
        </div>
      </div>
      <div class="register back">
        <div class="formTable">
          <div class="title font000">—————— 注册 ——————</div>
          <el-form :model="registerData" :rules="registerRules" ref="registerForm" label-width="auto" class="">
            <el-form-item label="用户名" prop="name">
              <el-input v-model="registerData.name" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="registerData.password" placeholder="请输入密码" password></el-input>
            </el-form-item>
            <!-- <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="registerData.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
                <el-radio :label="0">未知</el-radio>
              </el-radio-group>
            </el-form-item> -->
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="registerData.email"></el-input>
            </el-form-item>
            <!-- <el-form-item label="电话" prop="tel">
              <el-input v-model="registerData.tel"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="registerData.address"></el-input>
            </el-form-item> -->
          </el-form>
          <div class="button btn fontFFF" @click="register">立即注册</div>
          <div class="bottomBar f12 font2">
            <div class="btn" @click="toLogin">返回登录</div>
            <div>｜</div>
            <div class="btn" @click="toHome">返回首页</div>
          </div>
        </div>
      </div>
    </div>
    <star-bg-field class="starBg"/>
  </div>
</template>

<script>
import { loginApi, registerApi } from '@/api/user'
import { setCookie } from '@/utils/common'
import { mapMutations } from 'vuex'
import StarBgField from '@/components/StarBgField'
export default {
  name: 'view-login',
  components: {
    [StarBgField.name]: StarBgField
  },
  data() {
    return {
      bgImg: require('@/assets/img/bg.jpg'),
      loginData: {},
      registerData: {
        sex: 0
      },
      loginRules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ]
      },
      registerRules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ],
        tel: [
          { required: true, message: '请输入电话', trigger: 'change' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'change' }
        ]
      },
      isRegister: false
    }
  },
  created() {
  },
  methods: {
    ...mapMutations('user', ['addLoginSrotage']),
    loadRongJs() {
      console.log('loadRongJs')
    },
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          loginApi(this.loginData).then((res) => {
            if (res.code === 1) {
              this.$message.success(res.msg)
              setCookie('user', JSON.stringify({
                id: res.data.id,
                token: res.data.token
              }), 2)
              // this.addLoginSrotage({
              //   id: res.data.id,
              //   token: res.data.token
              // })
              this.$router.push('/')
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error('信息校验不通过')
        }
      })
    },
    register() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          registerApi(this.registerData).then((res) => {
            if (res.code === 1) {
              this.$message.success('注册成功')
              this.isRegister = false
              this.$set(this.loginData, 'name', this.registerData.name)
              this.$set(this.loginData, 'password', this.registerData.password)
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error('信息校验不通过')
        }
      })
    },
    forgetPw() { },
    toRegister() {
      this.isRegister = true
    },
    toLogin() {
      this.isRegister = false
    },
    toHome() {
      this.$router.push('/')
    },
    change() {
      this.$forceUpdate()
    }

  }
}
</script>

<style lang="scss" scoped>
#view-login {
  width: 100%;
  height: 100%;
  perspective: 1000px;
  /* 设置透视视角，实现3D效果 */
  .starBg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .loginBg {
    position: fixed;
    top: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;

    .loginImg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .loginMask {
      display: block;
      width: 100%;
      height: 100vh;
      background: #0000005e;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .content {
    position: relative;
    transform-style: preserve-3d;
    width: 520px;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease-out;
  }

  .flipper {
    position: relative;
    transform-style: preserve-3d;
    /* 设置子元素为3D空间 */
    transition: 0.6s;
    /* 定义过渡动画的时间 */
    transform-origin: center center;
    /* 设置翻转的中心点 */
    // width: 200px;
    // height: 200px;
  }

  .front,
  .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    /* 隐藏背面 */
  }

  .front {
    z-index: 2;
    /* 定义正面样式 */
  }

  .back {
    transform: rotateY(180deg);
    /* 默认隐藏背面 */
    /* 定义背面样式 */
  }

  .flipped {
    transform: rotateY(180deg) translate(50%, -80%);

    /* 翻转元素 */
    .register {
      opacity: 1;
      height: 450px;
      // transition: 0.6s;
      // transform-style: preserve-3d;
      // perspective: 800px;
    }

    // .formTable {
    //   transition: 0.6s;
    //   transform: translate3d(0, 0, 40px);
    // }
  }

  .register {
    opacity: 0;
    transition: 0.6s;
  }

  .loginBox {
    height: 400px;
  }

  .loginBox,
  .register {
    transform-style: preserve-3d;
    perspective: 800px;

    .formTable {
      // transition: 0.6s;
      // transform: translate3d(0, 0, 40px);
    }

    .title {
      height: 50px;
      text-align: center;
    }

    .button {
      background-color: $light-blue;
      height: 40px;
      border-radius: 3px;
      width: 350px;
      margin: 0 auto;
      @include verticalCenter;
      margin-top: 50px;
    }

    .bottomBar {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 28px auto 0;

      .btn {
        padding: 0 12px;
      }
    }

    background-color: #ffffff;
    box-sizing: border-box;
    padding: 60px;
    border-radius: 5px;
  }

}
</style>
